<template>
	<view class="wrap">

		<u-navbar :is-back="false" :border-bottom="false" back-icon-color="#fff" title="氧气租借" title-size="36"
			title-color="#fff" :background="background">
			<view class="slot-wrap">
				
				<image @click="goback" class="home" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/23.png"
					mode=""></image>
			</view>
		</u-navbar>
		<view class="bgs">
			<view class="shebeihao">
				<u-tag class="tags" shape="circleRight"   mode="dark" :text="deviceName.name+'('+deviceName.terminal_id+')'" type="info" />
				<!-- {{deviceName.name}}({{deviceName.terminal_id}}) -->
			</view>
			<image class="notice" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/25.png" mode="widthFix"></image>
			
		</view>
		
		<view class="cont">
			<view class="title">
				计费规则
			</view>
			<view class="rules">
				<view v-if="first_time" class="top">
					<image class="icon" mode="" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/27.png"></image>
					<view class="right">
						<view class="tit">
							{{first_time}}
						</view>
					</view>
				</view>
				<view class="top">
					<image class="icon" mode="" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/28.png"></image>
					<view class="right">
						<view class="tit">
							{{slot_price}}
						</view>
						<view class="desc">
							{{slot_price1}}
						</view>
					</view>
				</view>
			</view>

			<view class="btns">
				<image @click="zu" class="imgs" mode="" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/29.png">
				</image>
				<image @click="TOback" class="imgs" mode=""
					src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/30.png"></image>
			</view>
			<view class="handle">
				<text
					@click="navTo('/pages/common/webview?url=https://admin.yishengyang.cn/html/policy.html&name=用户协议')">服务协议</text>
				<text class="line"></text>
				<text
					@click="navTo('/pages/common/webview?url=https://admin.yishengyang.cn/html/yszc.html&name=隐私政策')">隐私说明</text>
				<text class="line"></text>
				<text @click="navTo1">附近设备</text>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceName:{},
				deviceId:"",
				first_time:"",
				slot_price1:'',
				slot_price:'',
				background: {

					// background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/24.png) no-repeat',
					// // 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(180deg, #0e5dff 0%, #3275ff 100%)'
				}
			}
		},

		onLoad(e) {
			this.deviceId  =e.deviceId
			this.$u.api.config({
				paramCode: "first_time_msg"
			}).then(res => {
				if (res.code == 0) { this.first_time = res.config }
			})
			this.$u.api.config({
				paramCode: "slot_price1"
			}).then(res => {
				if (res.code == 0) { this.slot_price1 = res.config }
			})
			this.$u.api.config({
				paramCode: "slot_price2"
			}).then(res => {
				if (res.code == 0) { this.slot_price = res.config }
			})
			this.$u.api.deviceBasicInfo({
				deviceId:e.deviceId
			}).then(res => {
				if (res.code == 0) { 
					console.log(res.device,77777777);
					this.deviceName = res.device
				}
			})
			
			
		},

		methods: {
			navTo(url) {
				console.log(url, 3333333333);
				uni.navigateTo({
					url
				})
			},
			navTo1() {
				console.log(4443333333333);

				uni.reLaunch({
					url: "/pages/sys/near/index?type=" + true+"&deviceId="+this.deviceId
				})
			},

			goback() {
				uni.reLaunch({
					url: "/pages/sys/main/index"
				})
			},
			zu() {
				if(!this.vuex_token){
					uni.navigateTo({
						url:"/pages/sys/main/login"
					})
					
					return
				}
				
				uni.navigateTo({
					// url: "/pages/sys/scar/zu",
					url:"/pages/sys/scar/zu?deviceId="+this.deviceId
					// this.deviceId 
				})
			},
			TOback() {
				if(!this.vuex_token){
					uni.navigateTo({
						url:"/pages/sys/main/login"
					})
					
					return
				}
				
				console.log(333);
				uni.navigateTo({
					url: "/pages/sys/scar/detail?deviceId="+this.deviceId
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	/deep/ .u-mode-dark-info{
		background: #b3cbff !important;
		color: #fff !important;
		// background: linear-gradient(180deg, #1bbd7b 0%, #8ee38f 100%) !important;
		// box-shadow: 0px 8px 9px 0px rgba(41,88,255,0.23) !important;
		border-radius: 0 76px 76px 0 !important;
	}
	page {
		background: #fff;
	}
	.bgs{
		position: relative;
		.shebeihao{
			position: absolute;
			top: 5px;
			left: 0;
			right: 0;
			text-align: left;
			padding-left: 10px;
			color: #fff;
			font-size: 28rpx;
			font-family: 'PingFang SC-Medium';
		}
	}

	.notice {
		width: 100%;
	}

	.cont {
		border-radius: 32rpx 32rpx 0 0 !important;
		width: 750rpx;

		padding: 37rpx 40rpx 54rpx;
		// height: 629rpx;
		background: #fff;
		box-shadow: 0rpx -32rpx 32rpx 0rpx rgba(197, 197, 197, 0.47);

		// box-shadow: 0rpx -32rpx 32rpx 0rpx red;
		opacity: 1;
		margin-top: -25rpx;
		position: relative;
		z-index: 7;

		// border: 1rpx solid #FFFFFF;
		.title {
			font-size: 36rpx;
			color: #333;
			font-family: 'PingFang SC-Medium';
			padding-bottom: 44rpx;
		}

		.rules {

			.top {
				margin-bottom: 30rpx;
				display: flex;

				&:last-child {
					margin-bottom: 0;
				}

				.icon {
					width: 46rpx;
					height: 46rpx;
					margin-right: 41rpx;
				}

				.right {
					flex: 1;

					.tit {
						font-size: 29rpx;
						color: #333;
						font-family: 'PingFang SC-Medium';
					}

					.desc {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;
					}
				}
			}
		}

		.btns {
			padding-top: 59rpx;
			margin-bottom: 57rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.imgs {
				width: 333rpx;
				height: 104rpx;
			}
		}

		.handle {
			padding: 0 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;

			.line {
				width: 1rpx;
				height: 12px;

				background: #CECECE;
			}
		}
	}

	.home {
		width: 44rpx;
		height: 55rpx;
		margin-left: 40rpx;
	}

	.bg {
		width: 100%;
		z-index: -1;
	}
</style>
